<template>
  <div class="messageContainer">
    <el-table :data="tableData">
      <el-table-column prop="date" label="日期" width="140">
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120">
      </el-table-column>
      <el-table-column prop="address" label="地址">
      </el-table-column>
    </el-table>
    <audio :src="menuMp3" controls="controls" id="menuAudio" style="left: -1000px;position: absolute;"></audio>
    <el-button type="primary" @click="handleShowNews">新消息</el-button>

  </div>
</template>

<script>
  import Vue from 'vue'
  import {Button, Input} from 'element-ui'
  import menuMp3 from '../assets/menu.mp3'

  Vue.component(Button.name, Button)
  Vue.component(Input.name, Input)

  export default {
    name: 'App',
    data () {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }
      return {
        tableData: Array(10).fill(item),
        menuMp3: menuMp3
      }
    },
    beforeRouteUpdate (to, from, next) {
      next()
    },
    mounted () {
      console.log(this.$route.params.id)
      this.num = this.$route.params.id
    },
    methods: {
      handleEdit () {
        this.$store.dispatch('changeNum1', this.num)
      },
      handleGetSession () {
        console.log(window.sessionStorage.getItem('num'))
      },
      handleShowNews () {
        const myAudio = document.getElementById('menuAudio')
        myAudio.play()
        this.$store.dispatch('setNewsNum', 1)
      }
    },
    beforeDestroy () {
    }
  }
</script>

<style scoped>
  .indexContainer {
    font-size: 0.35rem;
  }

  img {
    width: auto;
    max-width: 100%;
  }
</style>
